<template>
    <div class="bigbox">
        <div class="flexs  sonbox" v-for="(item, index) in dataList" :key="index">
            <div class="leftbox flex-c-c-c" :style="{ backgroundImage: 'url(' + item.img + ')' }">
                <div v-for="(tit, int) in item.title" :key="int">{{ tit }}</div>
            </div>
            <div class="rightbox">
                <div class="titbox flex-sa-c" v-for="(it, inx) in item.list" :key="inx">
                    <topBottomTit style="width: 200px;" :title="it.title" :url="it.img" />
                    <div class="flex-sa-c databox">
                        <topBottomData :num="formatNumber(it.today)" title="今日" />
                        <topBottomData :num="formatNumber(it.recent)" title="近30天" />
                    </div>
                </div>
            </div>
        </div>
    </div>


</template>
<script setup>
import { ref } from 'vue';
import topBottomTit from './components/topBottomTit.vue';
import topBottomData from './components/topBottomData.vue';
import { formatNumber } from './config.js';
const dataList = ref([
    {
        img: new URL(`./assets/矩形 8027@2x.png`, import.meta.url).href,
        title: '电话快打',
        list: [{
            img: new URL(`./assets/容器 20597@2x(1).png`, import.meta.url).href,
            title: '部推漫游地线索',
            today: 699,
            recent: 69999,
        }, {
            img: new URL(`./assets/容器 20598@2x.png`, import.meta.url).href,
            title: '其他线索',
            today: 699,
            recent: 699945565559,
        }, {
            img: new URL(`./assets/容器 20599@2x.png`, import.meta.url).href,
            title: '打处数',
            today: 699,
            recent: 9654236,
        }, {
            img: new URL(`./assets/扫码@2x(3).png`, import.meta.url).href,
            title: '抓获人数',
            today: 699,
            recent: 69999,
        }, {
            img: new URL(`./assets/容器 20602@2x.png`, import.meta.url).href,
            title: '打击团伙数',
            today: 699,
            recent: 69999,
        }]
    },
    {
        img: new URL(`./assets/zjkd.png`, import.meta.url).href,
        title: '资金快打',
        list: [{
            img: new URL(`./assets/扫码@2x(4).png`, import.meta.url).href,
            title: '电报线索数',
            today: 699,
            recent: 69999,
        }, {
            img: new URL(`./assets/容器 20602@2x(1).png`, import.meta.url).href,
            title: '其他线索数',
            today: 699,
            recent: 69999,
        }, {
            img: new URL(`./assets/容器 20599@2x(1).png`, import.meta.url).href,
            title: '拦截金额',
            today: 699,
            recent: 69999,
        }, {
            img: new URL(`./assets/扫码@2x(5).png`, import.meta.url).href,
            title: '抓获人数',
            today: 699,
            recent: 69999,
        }, {
            img: new URL(`./assets/容器 20601@2x.png`, import.meta.url).href,
            title: '打击团伙数',
            today: 699,
            recent: 69999,
        }]
    }
])

</script>
<style lang="scss" scoped>
@import './css/index.scss';

.bigbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;


    .sonbox {
        width: 100%;
        height: 49%;


        .rightbox {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding: 5px;
            background-color: rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
        }
    }
}

.titbox {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    height: calc(20%);

    .databox {
        border-radius: 5px;
        padding: 5px 0;
        background-color: rgba(255, 255, 255, 0.1);
        width: 100%;
        height: calc(100% - 5px);
    }
}

.leftbox {
    width: 36px;
    height: 145px;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;

}
</style>